<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <!--<link rel="stylesheet" href="../../css/tables.css">-->
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />

    <![endif]-->
    <title>新旧页面使用情况</title>
    <style type="text/css">
        .purchase-situation .edition{width: 10%;height: 26px;}
        /*.product-classification .sub{line-height: 28px;max-width: 90%;}*/
        /*!*.classified-search button{top: 0;}*!*/
        /*.panel-body .title .lef{left: 40%;}*/
        /*.panel-body .title .rig{left: 1%;}*/
    </style>
</head>
<body>
<div class="classifiedBox">
    <div class="classified-search">
        <form class="form-horizontal" style="margin-bottom: 5px;">
            <fieldset>
                <div class="control-group">
                    <div class="controls">
                        <p style="float: left;line-height: 34px;">登录时间：</p>
                        <div class="input-prepend input-group" style="float: left;width:150px;">
                            <!--<div id="reservation" class="pull-left dateRange" style="width: 210px;background-color: #eee;border: 1px solid #ccc;border-radius: 4px;padding: 2px 7px;margin-top: 4px;">
                               <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                               <span id="searchDateRange"></span>
                               <b class="caret"></b>  -->
                            <span class="add-on input-group-addon">
                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                     	</span>
                            <input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" />
                        </div>
                        <!--<p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>-->
                    </div>
                </div>
            </fieldset>
        </form>
        <div class="purchase-situation">

            版本选择：<select name="" id="" class="select edition">
                        <option value="">官方版</option>
                        <!--<option value="">合作商版</option>-->
                        <!--<option value="">全部</option>-->
                    </select>

        </div>
        <div class="product-classification">
            <div class="productR">
                科目分类：
            </div>
            <div class="productL sub">

                <!--<span id="pcagent" class="selected">pc客户端</span>
                <span id="agent" class="selected">代理商版</span>-->
                <!--<br>-->
                <span></span>
                <span id="zhenggao" class="selected">正高</span>
                <span id="fugao">副高</span>
                <span id="chujizige">初级资格</span>
                <span id="zhongjizige">中级资格</span>
                <span id="zhiyezige">执业资格</span>
                <span id="zhuyuanyishi">住院医师规培结合考核</span>
                <span id="linchuangsanji">临床三基</span>
                <span id="yishidingqi">医师定期考核</span>
                <span id="yiyongshebei">医用设备能力考评</span>
                <span id="other">其它</span>
            </div>
            <!--<div class="singleApp">

            </div>-->
        </div>

        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
        <!--<div class="refresh">
            <img src="../../img/refresh.png" alt="">
            <a class="tabReload" href="#">刷新当前</a>
        </div>-->
    </div>
</div>
<!--数据展示结果-->

<img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />
<div class="panel-body" style="display: none;">
    <div class="titleNum"></div>
    <div class="title" style="width:100%">
        <ul class="title1 lef" >
            <li class="list1">新旧界面人数占比情况</li>
            <li id="main1" class="main">
            </li>
        </ul>
        <ul class="title2 rig" >
            <li class="list1">新旧界面人数使用趋势</li>

            <li id="main" class="main">

            </li>
        </ul>
    </div>

</div>
</div>
<script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
<!--<script src="../js/charts/Chart.js"></script>-->
<script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
<script type="text/javascript" src="../../js/base/echarts.js"></script>
<script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../js/base/ajax.js"></script>
<script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
<script type="text/javascript" src="../../js/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/base/dialog.js"></script>
<script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/riqi/moment.js"></script>
<script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>
<script type="text/javascript">
    var myDate = new Date();//添加日期
    y=myDate.getFullYear();
    m=myDate.getMonth()+1;
    d=myDate.getDate()-1;
    if(myDate.getDate()==1){
        d=myDate.getDate();
    }
    dqy=y+"-"+m+"-"+d;
    $('#reservation').val(dqy+" - "+dqy)
    $(document).ready(function() {
        $('#reservation').daterangepicker({
            maxDate : moment(), //最大时间
            dateLimit : {
                days : 60
            }, //起止时间的最大间隔
            showDropdowns : true,
            showWeekNumbers : false, //是否显示第几周
            timePicker : false, //是否显示小时和分钟
            timePickerIncrement : 60, //时间的增量，单位为分钟
            timePicker12Hour : false, //是否使用12小时制来显示时间
            ranges : {
                //'最近1小时': [moment().subtract('hours',1), moment()],
                '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                '最近7日': [moment().subtract('days', 6), moment()],
                '最近30日': [moment().subtract('days', 29), moment()],
                '最近60日': [moment().subtract('days', 59), moment()]
            },
            opens : 'right', //日期选择框的弹出位置
            buttonClasses : [ 'btn btn-default' ],
            applyClass : 'btn-small btn-primary blue',
            cancelClass : 'btn-small',
            format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式
            separator : ' - ',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '从',
                toLabel : '到',
                weekLabel: 'W',
                customRangeLabel : '选择时间',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1
            }
        }, function(start, end, label) {//格式化日期显示框
            $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        });

    });
    var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
        "10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
        "20点","21点","22点","23点"
    ];
    var problemNum;
    this.init = function(){
        var option = {};
        var dd=new Date();
        var m=dd.getMonth()+1;
        var d1=dd.getDate();
        //var d2=dd.getDate();
        var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
        var days2=  dd.getFullYear()+'-'+m+'-'+d1;
        $('#logmin').val(days1);
        $('#logmax').val(days1);
        allclick();//点击事件

    };
    {

        /**************************************************
         * 功能：点击事件
         * 函数名：allclick（）
         * 传入参数：无
         * 创建人：刘淳昊 2017-03-13
         *************************************************/
        function allclick() {
            //刷新页面
            $('.refresh').on('click', function () {
                window.location.reload();
            });
            //切换科目选项 (全选反选)
            $('.productL span').on('click', function () {
                if ($(this).attr('id') == 'allsingleproducts') {
                    $(this).addClass('selected').siblings().removeClass('selected');
                } else {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                        $('.productL span').eq(0).removeClass('selected');
                    } else {
                        $(this).addClass('selected');
                        $('.productL span').eq(0).removeClass('selected');
                    }
                }

            });


            $('#btncx').on('click', function () {
                var val = $('#reservation').val().split(' - ');
                var startTime = new Date(val[0]);
                var endTime = new Date(val[1]);
                if (endTime - startTime < 5270400000) {
                    $('.setpNum li').html('0');
                    $('.loadingimg').show();
                    setTimeout(function () {
                        $('.loadingimg').hide();
                        $('.panel-body').show();
                        allFeedback('次数');
//							problemfeedback();  //试题反馈原因分类，以及总数统计
                        //查询结果
//              			errorfeedBack();
                    }, 500)
                } else {
                    G_Prg.alert('每次最多选取60天', function () {

                    });
                }
            })

        }

        /**************************************************
         * 功能：错误反馈 /api/new/feedback
         * 函数名：feedback
         * 传入参数：startDay    开始时间
         *         endDay      结束时间
         *         clients     所选单品
         *         userType    购买未购买[0未购买、1购买、2合计]
         * 创建人：刘淳昊 2017-03-20
         *************************************************/
        function allFeedback(numData) {
            var val = $('#reservation').val().split(' - ');
            var startTime = val[0];
            var endTime = val[1];
            var clients = [];
            var clientsName = [];
            $('.productL .selected').each(function () {
                clients.push($(this).attr('id'));
                clientsName.push($(this).text());
            });
            var times = [];
            getAll(startTime, endTime);
            function getAll(begin, end) {
                var ab = begin.split("-");
                var ae = end.split("-");
                var db = new Date();
                db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
                var de = new Date();
                de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
                var unixDb = db.getTime();
                var unixDe = de.getTime();
                for (var k = unixDb; k <= unixDe;) {
                    times.push((new Date(parseInt(k))).format());
                    k = k + 24 * 60 * 60 * 1000;
                }
            }
//            var _url = ''
//            var pamas={
//                'stats':'',
//                'end':'',
//            }
//            var success=function (json) {
//
//            }
//            G_AjaxApi_test.post(_url,pamas,false,success)
            var clientsD = JSON.stringify(clients);
            var _url = '/api/new/complainWithNewAndOld?startDay=' + startTime + '&endDay=' + endTime + '&appVersion=' + 'ying' + '&appType=' + clientsD;
            console.log(clients);
            G_AjaxApi_test.get(_url, false, function (json) {
                var jsonData = JSON.parse(json);
                if (jsonData.status == 200) {
                   if (jsonData.data == []) {
                        alert('数据为空');
                    } else {
                        $('.titleNum').empty();
                       examPie(jsonData.data,clientsName);
                       $('.loadingimg').hide();
                    }

                } else {
                    console.log(jsonData.status);
                }
            });

            var _url2 = '/api/new/complainWithNewAndOldLine?startDay=' + startTime + '&endDay=' + endTime + '&appVersion=' + 'ying' + '&appType=' + clientsD;
            G_AjaxApi_test.get(_url2, false, function (json) {
                var jsonData = JSON.parse(json);
                if (jsonData.status == 200) {
                   if (jsonData.data == []) {
                        alert('数据为空');
                    } else {
                       $('.titleNum').empty();
                       examLine(jsonData.data, times, clientsName);
                    }

                } else {
                    console.log(jsonData.status);
                }
            })

        }
        /**************************************************
         * 功能：折线图
         * 函数名：examLine（）
         * 传入参数：无
         *************************************************/
        function examLine(jsonData, time, clientsName) {
            var series = [];
            var xAxis = [];
            var btn = [];
            for (var i = 0; i < jsonData.length; i++) {
            	var name='';
            	if(jsonData[i].lastApp == 'new'){
            		 name = '旧界面';
            	}else if(jsonData[i].lastApp == 'ying'){
            		 name = '新界面';
            	}else{
            		continue;
            	}
                btn.push(name);
            }
            var StyleSin = function () {
                return {
                    data: [],
                    splitLine: {show: false},
                    boundaryGap: false,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000',
                            fontFamily: "microsoft yahei",
                            fontSize: 12
                        }
                    }

                }
            };
            var Item = function () {
                return {
                    name: '',
                    type: 'line',
                    itemStyle: {normal: {}},
                    label: {normal: {}},
                    data: []
                }
            };
            for (var i = 0; i < jsonData.length; i++) {
//              以日期为x轴
                var it = new Item();
                var style = new StyleSin();
                it.name = btn[i];
                it.type = 'line';
                it.data = jsonData[i].data.split(',');
                style.data = time;
                style.type = 'category';
                style.boundaryGap = false;
                style.name = '(时间)';
                series.push(it);// 将item放在series中
                xAxis.push(style);
            }
            // 基于准备好的dom，初始化echarts实例
            swChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            option = {
                title: {
                    x: '20',
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: btn
                },
                grid: {
                    left: '5%',
                    bottom: '2%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value'
                },
                series: []

            };
            option.series = series;
            option.xAxis = [{  //修改上面的日期
                axisLabel: {show: true},
                textStyle: {color: "#000", fontFamily: "microsoft yahei", fontSize: 12},
                boundaryGap: false,
                name: "(时间)",
                type: "category",
                data: xAxis[0].data
            }];
            // 使用刚指定的配置项和数据显示图表。
            swChart.setOption(option);
        }

        /**************************************************
         * 功能：饼状图
         * 函数名：examPie（）
         * 传入参数：无
         *************************************************/
        function examPie(jsonData, clientsName) {
            var pieData = [];
            for (var i = 0; i < jsonData.length; i++) {
            	if(jsonData[i].name == 'new'){
            		 name = '旧界面';
            	}else if(jsonData[i].name == 'ying'){
            		 name = '新界面';
            	}else{
            		continue;
            	}
                var value = {
                    'name': name,
                    'value': jsonData[i].count
                };
                pieData.push(value);
            }

            // 基于准备好的dom，初始化echarts实例
            hwChart = echarts.init(document.getElementById('main1'));
            var option1 = {
                title: {
                    text: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: clientsName
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {
                            show: true,
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '10%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                series: [
                    {
                        name: '来源',
                        type: 'pie',
                        radius: '60%',
                        center: ['45%', '50%'],
                        data: pieData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            //使用刚指定的配置项和数据显示图表。
            hwChart.setOption(option1);
        }
        /**********************************************************
         * 功能：获取日期区间
         * ********************************************************/
        function getDate(datestr) {
            var temp = datestr.split("-");
            var date = new Date(temp[0], temp[1], temp[2]);
            return date;
        }

        Date.prototype.format = function () {
            var s = '';
            s += this.getFullYear() + '-';          // 获取年份。
            s += (this.getMonth() + 1) + "-";         // 获取月份。
            s += this.getDate();                 // 获取日。
            return (s);                          // 返回日期。
        };
        function getAll(begin, end) {
            times = [];
            var ab = begin.split("-");
            var ae = end.split("-");
            var db = new Date();
            db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
            var de = new Date();
            de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
            var unixDb = db.getTime();
            var unixDe = de.getTime();
            for (var k = unixDb; k <= unixDe;) {
                times.push((new Date(parseInt(k))).format());
                k = k + 24 * 60 * 60 * 1000;
            }
        }

        init();
    }

</script>
</body>
</html>